<template>
  <div class="mt-4 mx-2 space-y-2">
    <van-swipe-cell
      class="rounded shadow pl-6"
      v-for="item in user.bankcards"
      :key="item.id"
      num="2"
    >
      <p class="pt-6">{{ item.bank }}</p>
      <p class="mt-4 pb-6 pr-6 text-right tracking-widest">{{ item.number }}</p>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="h-full"
          @click="onDelete(item)"
        />
      </template>
    </van-swipe-cell>

    <div class="rounded shadow p-6" @click="$router.push('/my/bankcard/bind')">
      <van-icon name="plus" class="text-lg" />
      <span class="ml-2">添加银行卡</span>
    </div>
  </div>
</template>

<script>
// import banks from './banks.json'
// console.log(banks)
export default {
  data() {
    return {}
  },
  computed: {
    user() {
      return this.$store.state.user
    },
  },
  methods: {
    onDelete(bankcard) {
      if (this.user.bankcards.length <= 1) {
        this.$toast('不能删除最后一个')
        return
      }
      this.$store.commit('setUserAttr', {
        key: 'bankcards',
        val: this.user.bankcards.filter(item => item.id !== bankcard.id),
      })
      this.axios.delete(`/m/bankcards/${bankcard.id}`).then(res => {
        this.$toast.success('已删除')
      })
    },
  },
}
</script>

<style>
</style>